<template>
  <el-container>
    <el-main>
      <div class="details-item sa-flex sa-col-top">
        <div class="details-item-label">资质证明</div>
        <div class="sa-flex sa-flex-wrap">
          <div class="sa-m-r-10" v-for="(item,index) in props.modal.params.url" :key="index">
            <el-image style="width: 225px; height: 150px" :src="checkUrl(item)" :fit="'cover'"  />
          </div>
        </div>
      </div>
      <div class="details-item sa-flex sa-col-top" v-if="props.modal.params.type === 2">
        <div class="details-item-label">驳回原因</div>
        <el-input
          style="width: 440px"
          disabled
          :autosize="{ minRows: 4 }"
          type="textarea"
          placeholder="驳回理由"
          v-model="props.modal.params.remarks"
        />
      </div>
    </el-main>
    <el-footer class="sa-footer--submit" v-if="props.modal.params.type === 2">
      <el-button type="primary" @click="alignApply">重新申请</el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  const alignApply = () => {
    emit('modalCallBack', {
      event: 'confirm',
    });
  };
</script>
<style lang="scss" scoped>
  .details-item {
    padding: 0 25px;
    margin-bottom: 35px;

    .details-item-label {
      min-width: 80px;
      font-size: 14px;
      font-weight: normal;
      color: #3D3D3D;
      margin-right: 20px;
    }

  }
</style>